import * as React from 'react';
import {Form, Table} from 'antd';
import {ColumnProps} from 'antd/lib/table';
import {withWrapper} from '../../components/basic';
import * as moment from 'moment';
import {NotiType, NotiTarget} from '../../enum/notification';

const renderTime = (text: string) => text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '';

const renderAllPeople = (text: string) => {
    if (text) {
        if (NotiTarget[text] === NotiTarget.all) {
            return <span style={{color: '#40ebf8'}}>{NotiTarget.all}</span>
        }

        return NotiTarget.assign
    }
    return ''
};

const columns: Array<ColumnProps<Table.Data>> = [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 100,
    fixed: 'left',
}, {
    title: `消息标题`,
    dataIndex: 'title',
    key: 'title',
    width: 200
}, {
    title: `消息详情`,
    dataIndex: 'details',
    width: 400,
    key: 'details',
}, {
    title: '消息发送对象',
    dataIndex: 'target',
    width: 250,
    key: 'target',
    render: renderAllPeople
}, {
    title: '昵称',
    dataIndex: 'nick_name',
    width: 200,
    key: 'nick_name',
    // render: renderAllPeople
}, {
    title: '电话号码',
    dataIndex: 'phone',
    width: 150,
    key: 'phone',
    // render: renderAllPeople
}, {
    title: '消息类型',
    dataIndex: 'type',
    width: 250,
    key: 'type',
    render: (text: string) => text ? NotiType[text] : ''
}, {
    title: '添加时间',
    width: 200,
    dataIndex: 'add_time',
    key: 'add_time',
    render: renderTime,
},];


class WrapperTable extends React.Component<any, {}> {
    public render(): any {
        const {onPageChange, datas, pager} = this.props;

        return (
            <Table
                rowKey="id"
                bordered={true}
                dataSource={datas}
                columns={columns}
                pagination={pager}
                scroll={{
                    x: columns.reduce((total: number, val: any): number => {
                        return total + val.width;
                    }, 0)
                }}
                onChange={onPageChange}
            />
        )
    }
}

export default withWrapper(Form.create()(WrapperTable));
